<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		省份：<select name="" id="peovince" onchange="onProvince()">
			<option value="-1">请选择省份</option>
		</select>
		城市：<select name="" id="city" onchange="onCity()">
			<option value="-1">请选择城市</option>
		</select>
		区县：<select name="" id="county" onchange="onCounty()">
			<option value="-1">请选择区县</option>
		</select>
		<br>
		你的选择是：<label id="selectValue"></label>
	</body>
	<script type="text/javascript">
		var provinces = ['福建省','广东省','江苏省']
		var citys = [
			['厦门市','漳州市','泉州市',],
			['深圳市','广州市','中山市'],
			['南京市','苏州市','常州市']
		]
		var countys = [
			[['同安区','翔安区','集美区'],['龙文区','龙海区','长泰区'],['鲤城区','惠安县','安溪县']],
			[['罗湖区','南山区','宝安区'],['越秀区','荔湾区','海珠区'],['石岐区街道','东区街道','西区街道']],
			[['玄武区','秦淮区','浦口区'],['姑苏区','虎丘区','相城区'],['金坛区','武进区','新北区']]
			
			
			
			// ['同安区','翔安区','集美区'],
			// ['龙文区','龙海区','长泰区'],
			// ['鲤城区','惠安县','安溪县'],
			// ['罗湖区','南山区','宝安区'],
			// ['越秀区','荔湾区','海珠区'],
			// ['石岐区街道','东区街道','西区街道'],
			// ['玄武区','秦淮区','浦口区'],
			// ['姑苏区','虎丘区','相城区'],
			// ['金坛区','武进区','新北区']
		]
		onload = function(){
			var provinceId = document.getElementById('peovince')
			for (var i = 0; i < provinces.length; i++) {
				provinceId.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`
			}
			

		}
		function onProvince(){
			var provinceId = document.getElementById('peovince')
			var cityId = document.getElementById('city')
			var countyId = document.getElementById('county')
			cityId.innerHTML=`<option value="-1">请选择城市</option>`
			countyId.innerHTML=`<option value="-1">请选择区县</option>`
			if (provinceId.value == -1) {
				return;
			}
			for (var i = 0; i < citys.length; i++) {
				cityId.innerHTML+=`<option value="`+i+`">`+citys[provinceId.value][i]+`</option>`
			}
		}
		function onCity(){
			var provinceId = document.getElementById('peovince')
			var cityId = document.getElementById('city')
			var countyId = document.getElementById('county')
			countyId.innerHTML=`<option value="-1">请选择区县</option>`
			if (cityId.value == -1 ) {	
				return;
			}
			for (var i = 0; i < countys[provinceId.value][cityId.value].length; i++) {
				countyId.innerHTML+=`<option value="`+i+`">`+countys[provinceId.value][cityId.value][i]+`</option>`
			}
		}
		function onCounty(){
			
			
			var provinceId = document.getElementById('peovince')
			var cityId = document.getElementById('city')
			var countyId = document.getElementById('county')
			
			var proname=provinces[provinceId.value]
			var cityname=citys[provinceId.value][cityId.value]
			var countyname=countys[provinceId.value][cityId.value][countyId.value]
			
			var selectVaule = document.getElementById('selectValue')
			console.log(proname)
			console.log(cityname)
			console.log(countyname)
			selectVaule.innerHTML=' ';
			selectVaule.innerHTML+= proname +'-'+cityname+'-'+countyname
		}
	</script>
</html>
